<template>
  <div class="container">
    <div class="header-container">
      <div class="logo"></div>
      <div class="search-container" :class="focus?'is-focus':''">
        <span class="iconfont">&#xe634;</span>
        <input class="search-text" type="text" placeholder="男子学做假币被师傅们轮番骗钱" @focus="isFocus" @blur="isFocus">
        <!-- <span class="search-text"> </span> -->
      </div>
      <div class="download-text">
          <router-link to="/">
            取消
          </router-link>
      </div>
    </div>
</div>
</template>

<script>
export default {
    name : 'search-header',
    data:function(){
        return{
            focus:false    
        }
    },
    methods:{
        isFocus(){
            console.log("发出了isFocus");
            this.focus = this.focus ? false : true;
        }
    }
}
</script>

<style lang="less" scoped>
    @import '../../../assets/styles/common.less';
    .container{
        height:53rem / @baseFont;
    }
    .header-container{
        z-index:100;
        width: 100%;
        position: fixed;
        display: flex;
        align-items: center;
        height:53rem / @baseFont;
        background-color: #fff;
        border-bottom: 1rem / @baseFont solid #f6f6f6;
    }
    .is-focus,.search-text:focus{
        animation: change-bg 0.5s forwards;
    }
    @keyframes change-bg {
        from{
            background-color: hsla(0,0%,92.2%,.72);
        }
        to{
            background-color: #FFFFFF;
            border-color: #8590a6;
        }
    }
    .search-container{
        background-color: hsla(0,0%,92.2%,.72);
        display: flex;
        align-items: center;
        color:#999;
        border: 1rem / @baseFont solid #ebebeb;;
        border-radius: 16rem / @baseFont;
        height:32rem / @baseFont;
        flex:1;
        margin: 0 12rem / @baseFont;
        font-size: 15rem / @baseFont;
        -webkit-appearance: none;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding: 0  0 0 15rem / @baseFont;
        .search-text{
            margin-left: 5rem / @baseFont;
            -webkit-appearance: none;
            width: 100%;
            outline: none;
            border: none;
            background-color: hsla(0,0%,92.2%,.72);
            font-size: 15rem / @baseFont;
            height:32rem / @baseFont;
            color:#1a1a1a;
        }
    }
    .download-text{
        a{
            color: #0084ff;
        }
        font-size: 15rem / @baseFont;
        border-right: 1rem / @baseFont solid #ebebeb;
        padding-right: 16rem / @baseFont;
    }
</style>
